<template>
  <div style="margin-left: 30px; text-align: left;">
    <template>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="讲师信息" name="first">
          <div style="width: 50%;">
            <el-form ref="form" :model="form" label-width="80px">
              <el-form-item label="昵称">
                <el-input v-model="form.tname"></el-input>
              </el-form-item>
              <!--<el-form-item label="上传头像">
                <el-col :span="6">
                  <el-upload
                    class="avatar-uploader"
                    action
                    :http-request="uploadImg"
                    :show-file-list="false"
                    :before-upload="beforeAvatarUpload">
                    <img v-if="imageUrl" :src="imageUrl" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  </el-upload>
                </el-col>
                <el-col :span="6">
                  <div style="text-align: left; line-height:18px;font-size: 12px">
                    * 图片尺寸为800px*800px，仅支持jpg、jpeg、png 格式，图片大小不超过2MB。
                  </div>
                </el-col>
              </el-form-item>-->
              <el-form-item label="头像：" :inline="true">
                <el-upload
                  class="avatar-uploader"
                  action="http://localhost:8061/lecturer/web/upload"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess"
                  :before-upload="beforeAvatarUpload">
                  <el-image style="width: 100px; height: 100px;" v-model="form.timage" :src="form.timage" v-if="form.timage"></el-image>
                 <!-- <div style="margin: -60% 0 0 75%">
                    <p style="color: #999;font-size: 12px;width: 200px;list-style-type: none;">*
                      图片尺寸为800px*800px，仅支持jpg、jpeg、png 格式，图片大小不超过2MB。</p>
                  </div>-->
                  <el-button size="small" type="primary">点击上传</el-button>
                </el-upload>
              </el-form-item>

              <el-form-item label="讲师简介">
                <el-input type="textarea" v-model="form.tjianjie" style="height: 180px"></el-input>
              </el-form-item>
              <el-form-item>
                <template slot-scope="scope">
                <el-button type="primary" @click="tj(scope.row)">立即修改</el-button>
                <el-button @click="qx()">取消</el-button>
                </template>
              </el-form-item>
            </el-form>
          </div>
        </el-tab-pane>
      </el-tabs>
    </template>
  </div>
</template>

<script>
  import qs from  'qs'
//import * as api from '@/api/lecturer'

export default {
  name: "LecturerInfo",
  data() {
    return {
      activeName: 'first',
      form:{
        tname: '',
        region: '',
        introduce: '',
        tjianjie:"",
        uid:"",
        timage:""
      },
      formupd:{
        tid:"",
        tImage:"",
        tName:"",
        tJianjie:""
      },
      imageUrl: 'http://meltange.oss-cn-beijing.aliyuncs.com/aaa/123.jpg'
    };
  },
  methods: {

    //查询讲师的个人信息
    query(){
    //alert("aaa")
      this.$axios.get("http://localhost:8061/list/teacher/sezx?uid="+this.form.uid).then(r=>{
        this.form=r.data.obj[0]
      })
    },
    //点击修改
    tj() {


      if (this.form.tname === '') {
        this.$alert('请输入姓名', '提示', {
          confirmButtonText: '确定',
        });
      }else if (this.form.tjianjie===''){
        this.$alert('请填写您的简介', '提示', {
          confirmButtonText: '确定',
        });
      }else {
          //跟数据库大小写不同
          this.formupd.tid=this.form.tid
          this.formupd.tName=this.form.tname
          this.formupd.tImage=this.form.timage
          this.formupd.tJianjie=this.form.tjianjie
        this.$axios.post("http://localhost:8061/list/teacher/updzx",qs.stringify(this.formupd)).then(r=>{
          if (r){
            this.query();
          }
        })
      }
    },
    qx(){
      this.query();
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },


    handleAvatarSuccess(res, file) {
      //alert(JSON.stringify(res.obj))
      this.form.timage = res.obj;
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },

  },
  created(){
    let uid=sessionStorage.getItem("uid")
    this.form.uid=uid

    this.query();
  }
}
</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}

.avatar {
  width: 100px;
  height: 100px;
  display: block;
}
</style>
